/**
 * 审核弹窗  审核详情页面上点击审核按钮出现
 */
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Button, Input, Modal, Radio, Alert, Row, message} from 'antd';
import React, { useState, useEffect } from 'react';
import { useRequest } from '@umijs/hooks';

import { handleAudit, getAuditNode } from '../../service.js'; //请求方法

import styles from './AuditForms.less'
const FormItem = Form.Item;
const { TextArea } = Input;
const RadioGroup = Radio.Group;



const AuditModal = props => {
  const { auditData, auditModalVisible, onClose, onSuccess, onNext } = props;

  const [tipInfo, handleInfo] = useState('请选择审批意见') // 错误提示内容
  const [showAlert, handleShowAlert] = useState('none') // 错误提示展示
  const [radioValue, handleRadioValue] = useState('') // 审批意见
  const [remark, handleRemark] = useState('') // 备注
  const [processNode, handleProcessNode] = useState('') // 当前审核节点
  const [btnLoading, handleBtnLoading] = useState(false)

  const radioGroupData = [
    {label: '同意', value:'0'},
    {label: '不同意', value:'1'},
    {label: '驳回', value:'2'},
  ]

  useEffect(()=>{
    if (auditModalVisible) {
      getAuditNode({taskId: auditData.taskId}).then(res=>{
        handleProcessNode(res.processNode)
      })
    }
  }, [auditModalVisible])


  //清空表格
  const resetForm = () => {
    handleRadioValue('')
    handleRemark('')
    handleShowAlert('none')
  }
  // 取消 
  const handleCancle = () => {
    onClose()
    resetForm()
  }
  // 提交请求
  const onSubmitBtn = () => {
    let paramsObj = {
      orderId:auditData.orderId,
      taskId: auditData.taskId,
      remark: remark,
      opinion: radioValue,
      processNode: processNode,
      handleUser: ''
    }
    handleBtnLoading(true)
    const hide = message.loading('正在提交')
    handleAudit(paramsObj).then(res => {
      onSuccess(res)
      resetForm()
      hide()
      handleBtnLoading(false) 
    }).catch(err =>{
      hide()
      handleBtnLoading(false) 
    })
  }
  const onNextBtn = () => {
    let paramsObj = {
      orderId: auditData.orderId,
      taskId: auditData.taskId,
      remark: remark,
      opinion:radioValue,
      processNode: processNode
    }
      onNext(paramsObj)
      resetForm()
  }

  // 下一步，若审核结果不为[完成], 则发送请求，返回页面
  const handleNext = () => {
    if (radioValue) {
      if (processNode === '2' && radioValue === '0') {
        onNextBtn()
      } else {
        onSubmitBtn()
      }
    } else {
      handleShowAlert('block')
      handleInfo('审批意见不能为空')
    }
  }
  const radioChange = (e) => {
    handleRadioValue(e.target.value)
    if (e.target.value === '1') {
      handleShowAlert('block')
      handleInfo('确定【不同意】，本审核流程将结束。')
    } else if (e.target.value === '2') {
      handleShowAlert('block')
      handleInfo('确定【驳回】将驳回至上一层级审核人')
    } else {
      handleShowAlert('none')
    }
  }



  return (
    <Modal
      destroyOnClose={true}
      title='审核'
      visible={auditModalVisible}
      footer={null}
      onCancel={onClose}
      className={styles.auditModal}
    > 
      <div>
        <div style={{display: showAlert}}>
          <Alert message={tipInfo} type="warning"/>
        </div>
          <Row style={{marginTop:10}}>
            <RadioGroup onChange={radioChange}  options={radioGroupData} value={radioValue}/>
          </Row>
          <Row style={{marginTop:10}}>
            <div>备注</div>
            <TextArea rows={3} onChange={(value) => {handleRemark(value.target.value)}} value={remark}></TextArea>
          </Row>
      </div>
      
      <div className={styles.modalFooter}>
        <Button onClick={handleCancle} loading={btnLoading}>取消</Button>
        <Button type="primary" onClick={handleNext} loading={btnLoading}>下一步</Button>
      </div>
      
    </Modal>
  )
}
export default Form.create()(AuditModal);

